<template>
  <view >
    <my-search @zdysj="zdy" bgcolor="'#dfdfsd'" radius="10"></my-search>
  <view class="container">
    <!-- 左滑动区 -->
    <scroll-view scroll-top="scorll" scroll-y="true" class="left-scroll-view" :style="{height:windowHeight + 'px'}">
      <block v-for="(item,i) in cateList" :key="i">
        <view @click="activeIt(i)" :class="['left-item', active==i?'active':'']">{{item.cat_name}}</view>
      </block>

    </scroll-view>
    <!-- 右滑动区 -->
    <scroll-view scroll-y="true" class="right-scroll-view" :style="{height:windowHeight + 'px'}">
      <!-- 二级分类项 -->
      <view v-for="(item2,index) in cateLever2" :key="index" class="catelever2-item">
        <view class="catel2">{{item2.cat_name}}</view>
        <!-- 三级分类项 -->
        <view class="catelever2-list">

          <view @click="toGoodList(item2)" class="catelever3-item" v-for="(i3,i) in item2.children" :key="i">
            <image :src="i3.cat_icon" mode=""></image>
            <text>{{i3.cat_name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
    </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        windowHeight: 0,
        cateList: [],
        active: 0,
        cateLever2: [],
        scorll: 0
      };
    },
    onLoad() {
      const syinfo = uni.getSystemInfoSync()
      this.windowHeight = syinfo.windowHeight - 50
      this.getCateList();
    },
    methods: {
      zdy(){
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      toGoodList(item){
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid' + item.cat_id
        })
      },
      activeIt(i) {
        this.active = i;
        this.cateLever2 = this.cateList[i].children;
        this.scorll = this.scorll === 0 ? 1 : 0
      },
      async getCateList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status === 200) {
          this.cateList = res.message
          this.cateLever2 = res.message[0].children
        }
      }
    }

  }
</script>

<style lang="scss">
  .container {
    display: flex;

    .right-scroll-view {

      // 二级分类
      .catelever2-item {
        .catel2 {
          text-align: center;
        }

        // 三级分类项 
        .catelever2-list {
          display: flex;
          flex-wrap: wrap;

          .catelever3-item {
            display: flex;
            flex-direction: column;
            width: 33%;
            align-items: center;
            margin: 10px 0;

            image {
              width: 60px;
              height: 60px;
            }

            text {
              font-size: 11px;
            }
          }
        }
      }
    }

    .left-scroll-view {
      width: 120px;

      .left-item {
        text-align: center;
        line-height: 60px;
        background-color: #eff4e4;
        font-size: 12px;

        &.active {
          background-color: #18BC37;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #007AFF;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
</style>
